<template>
    <div class="container">
        <!-- 搜索区域 -->
        <Card>
            <div class="search-list">
                <div class="search-item">
                    <div class="item-text">楼盘状态</div>
                    <div class="item-input">
                        <Select @on-change="changeMenu1" clearable style="width: 186px">
                            <Option value="0">下架</Option>
                            <Option value="1">上架</Option>
                        </Select>
                    </div>
                </div>
                <div class="search-item">
                    <div class="item-text">楼盘名称</div>
                    <div class="item-input">
                        <Input
                            clearable
                            v-model="queryForm.realEstateKeyword"
                            placeholder=""
                        />
                    </div>
                </div>
                <div class="search-item">
                    <div class="item-text">操作：</div>
                    <div class="item-input">
                        <Button type="primary" @click="loadData">查询</Button>
                    </div>
                </div>
            </div>
        </Card>
        <!-- 楼盘数组 -->
        <Card>
            <div class="room-list">
                <div class="room-item" v-for="item in roomArry" :key="item.id">
                    <div class="item">
                        <div class="item-message">
                            <div class="pic">
                                <img :src="item.realEstateImage" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-text">Id:</div>
                        <div class="item-message">{{item.id}}</div>
                    </div>
                    <div class="item">
                        <div class="item-text">楼盘名称</div>
                        <div class="item-message">{{item.realEstateName}}</div>
                    </div>
                    <div class="item">
                        <div class="item-text">排序</div>
                        <div class="item-message">{{item.dataSort}}</div>
                    </div>
                    <div class="item" >
                        <div class="item-text">前端展示</div>
                        <div class="item-message">
                            <i-switch false-color="#ff4949" v-model="item.show" @on-change="changeShow(item.id)" />
                        </div>
                    </div>
                </div>
            </div>
        </Card>
    </div>
</template>
<script>
import {roomList,roomIsShow} from "../../api/room"
export default {
    data(){
        return{
            // 查询参数
            queryForm: {
                realEstateStatus: null,
                realEstateKeyword: null
            },
            // 楼盘数组
            roomArry:[]
        }
    },
    created(){
        this.loadData()
    },
    methods:{
        // 初始数据
        loadData(){
            roomList(this.queryForm).then(res=>{
                console.log(res)
                this.roomArry=res
                res.forEach(item=>{
                    if(item.status==1){
                        item.show=true
                    }else{
                        item.show=false
                    }
                })
            })
        },
        // 项目展示开关
        changeShow(id){
            var status =null
            for(let i in this.roomArry){
                if(this.roomArry[i].id==id){
                    if(this.roomArry[i].status==1){
                        status=0
                    }else{
                        status=1
                    }
                }
            }
            roomIsShow(id,status).then(res=>{
                console.log(res)
                this.$Message.success("操作成功")
            })
            
        },
        // 切换楼盘类型
        changeMenu1(value){
            console.log(value)
            this.queryForm.realEstateStatus=Number(value)
            this.loadData()
        }
    }
}
</script>
<style lang="less" scoped>
// 条件筛选区域
// 条件筛选区域
.search-item {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  font-size: 0.28rem;
  .item-text {
    width: 1.5rem;
    font-weight: 600;
  }
  .item-input {
    display: flex;
    flex-direction: column;
    button {
      margin: 0.15rem 0;
    }
  }
}
/deep/.ivu-card-body {
  padding: 0;
}
// 数组样式
.room-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 0.15rem;
}
.room-item {
  background-color: #ccc;
  margin-bottom: 0.15rem;
  border-radius: 4px;
  padding: 0.15rem 0;
  width: 3.4rem;
  .item:last-child {
    border-bottom: none;
  }
  .item {
    display: flex;
    padding: 0.1rem;
    align-items: center;
    justify-content: space-between;
    .item-text {
      font-weight: 600;
    }
  }
}
.item-message:first-child{
    width: 100%;
}
.item-message {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  .pic{
    height: 2rem;
    img{
      width: 100%;
      height: 100%;
    }
    
  }
  button {
    margin:0.2rem;
  }
  .message {
    margin: 0.1rem 0;
  }
}
.ivu-card-bordered {
  margin-bottom: 0.3rem;
}
</style>